<template>
  <v-container>
    <v-card class="mt-4">
      <v-card-title>
        <span class="headline">衔接词/连接词网络</span>
      </v-card-title>
      <v-card-subtitle>衔接词在文章中的分布和关联</v-card-subtitle>
      <v-row>
        <v-col cols="12">
          <v-card class="pa-4">
            <div ref="transitionNetworkChart" style="width: 100%; height: 400px;"></div>
          </v-card>
        </v-col>
      </v-row>
    </v-card>
  </v-container>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "TransitionWordsNetwork",
  props: {
    transitionData: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.generateTransitionChart(this.transitionData);
  },
  methods: {
    generateTransitionChart(data) {
      const chartElement = this.$refs.transitionNetworkChart;
      const chart = echarts.init(chartElement);

      const option = {
        series: [{
          type: 'graph',
          layout: 'force',
          nodes: data.nodes,
          edges: data.edges,
          roam: true,
          label: {
            show: true,
            position: 'right',
            fontSize: 12
          },
          lineStyle: {
            color: '#4A90E2',
            width: 2
          }
        }]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style scoped>
.mt-4 {
  margin-top: 16px;
}
.pa-4 {
  padding: 16px;
}
</style>
